<script setup lang="ts">
/**
 * 打赏作者相关
 */
const bigImageType = ref("w");
const bigImageShow = ref();

function bigImage(imageType = '') {
  bigImageType.value = imageType;
  bigImageShow.value = true;
}

const tabType = ref("w");
</script>

<template>
  <div class="author-box">
    <div class="author-title">
      打赏作者
      【
      <el-tooltip
          class="box-item"
          effect="dark"
          content="作者QQ1912383953，可接网站定制"
          placement="top">
        <el-link style="font-weight: bolder" href="tencent://message/?uin=1912383953&Site=&Menu=yes" target="_blank">
          墨风
        </el-link>
      </el-tooltip>
      】
    </div>
    <div class="author-tab">
      <el-radio-group v-model="tabType">
        <el-radio value="w" size="large">微信</el-radio>
        <el-radio value="z" size="large">支付宝</el-radio>
      </el-radio-group>
    </div>
    <div class="author-content">
      <div v-if="tabType ==='w' " class="author-content-item" @click="bigImage('w')">
        <img class="image-box wei-xin" src="@/assets/image/wei.jpg"/>
      </div>
      <div v-else class="author-content-item" @click="bigImage('z')">
        <img class="image-box zhi-fu-bao" src="@/assets/image/zhifubao.jpg"/>
      </div>
    </div>
    <div class="big-image-dialog">
      <el-dialog v-model="bigImageShow" :show-close="false" :draggable="true"
                 style="width:22rem;height:28rem;display: flex;align-items: center;justify-content: center;user-select: none;background-color:rgba(255, 255, 255, 0);">
        <img v-if="bigImageType ==='w'" class="image-big-box" src="@/assets/image/wei.jpg"/>

        <img v-else class="image-big-box" src="@/assets/image/zhifubao.jpg"/>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped lang="scss">
.author-box {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: #fff;
  border-radius: 5px;
  width: 100%;

  .author-title {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem .5rem;
    text-align: center;
    width: inherit;
    border-bottom: solid 1px #c7c7c7;
  }

  .author-content {
    user-select: none;
    width: inherit;
    display: flex;
    align-items: center;
    flex-direction: column;

    .author-content-item {

      .image-box {
        width: 10rem;
        height: 12rem;
        object-fit: contain; /* 或者使用 object-fit: contain; */
        cursor: pointer;

      }

      .zhi-fu-bao {
      }

      .wei-xin {
      }
    }
  }

  .big-image-dialog {
    user-select: none;

    .image-big-box {
      width: 20rem;
      height: 25rem;
    }
  }
}
</style>